<template>
  <div style="min-height: 100%; display: flex; flex-direction: column">
    <div></div>
    <!-- 導航條 -->

    <div style="flex: 1; display: flex">
      <div class="zheng">
        <el-row :gutter="2">
          <el-col :xs="8" :sm="8" :md="8" :lg="7" :xl="7"
            ><div class="grid-content bg-purple">
              <div class="rightlump">
                <!-- 头像 -->
                <div class="header">
                  <div class="header-img">
                    <img
                      width="50px"
                      height="50px"
                      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                      class="img"
                    />
                  </div>
                  <div class="header-font">
                    <div class="header-font-a">
                      <div class="a1">总围观</div>
                      <div class="a2">58</div>
                    </div>
                    <div class="header-font-a">
                      <div class="a1">获得掌声</div>
                      <div class="a2">0</div>
                    </div>
                    <div class="header-font-a">
                      <div class="a1">打卡天数</div>
                      <div class="a2">2</div>
                    </div>
                  </div>
                </div>
                <div class="nickname">
                  <h1 class="nickname-a">蒙希山山</h1>
                </div>
                <p class="codeb">抖音号:234512</p>
              </div>
              <div>
                <p class="signature"><span>個性簽名</span></p>
              </div>
              <!-- 我的 -->
              <div>
                <el-col class="my">
                  <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#e6e7ee"
                    active-text-color="#ffd04b"
                  >
                    <el-menu-item index="1">
                      <i class="el-icon-box"></i>
                      <span slot="title"  >我的flag</span>
                    </el-menu-item>

                    <el-menu-item index="2">
                      <i class="el-icon-view"></i>
                      <span slot="title"  @click="weiguan">我的围观</span>
                    </el-menu-item>

                    <el-menu-item index="3">
                      <i class="el-icon-wallet"></i>
                      <span slot="title" @click="zhanghu">我的账户</span>
                    </el-menu-item>
                  </el-menu>
                </el-col>
              </div>
            </div></el-col
          >
          <el-col :xs="16" :sm="16" :md="16" :lg="17" :xl="17"
            ><div class="grid-content bg-purple-light">
              <router-view />
              </div
          ></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
div {
  display: block;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.zheng {
  width: 100%;
  margin:10px;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #545c64;
  overflow: hidden;
  padding: 36px 8px 0;
  width: 100%;
}
.bg-purple-light {
  background: #e5e9f2;
  
}
.grid-content {
  border-radius: 4px;
  min-height: 740px;
}
.rightlump {
  overflow: hidden;
  width: 100%;
}
.header {
  color: #e6e7ee;
  align-items: center;
  display: flex;
  flex-direction: row;
  font-family: PingFang SC, DFPKingGothicGB-Regular, sans-serif;
  font-weight: 400;
  justify-content: flex-start;
  position: relative;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.header-img {
  float: left;
  margin-left: 30px;
  margin-top: 30px;

  background-color: #e6e7ee;
  border: 1px solid #f1f2f5;
  border-radius: 50%;
  box-sizing: content-box;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  width: 60px;
  height: 60px;
}
.img {
  height: 100%;
  position: relative;
  width: 100%;
}

.header-font {
  align-items: center;
  display: flex;
  flex: 0 0 291px;
  flex-direction: row;
  justify-content: flex-start;
}
.header-font-a {
  margin-top: 40px;
  align-items: center;
  display: flex;
  flex-basis: 71px;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  position: relative;
}
.header-font-a:after {
  background-color: rgba(212, 81, 81, 0.1);
  content: "";
  display: inline-block;
  height: 22px;
  position: absolute;
  right: 0;
  width: 0.5px;
}

.header-font-a.a1 {
  color: rgba(122, 123, 129, 0.4);
  font-size: 12px;
  line-height: 20px;
}
.header-font-a.a2 {
  color: #2f3035;
  font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  margin-top: 2px;
}

.nickname {
  color: #e6e7ee;
  margin-left: 40px;
  margin-bottom: 8px;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin-top: 13px;
  position: relative;
}
.nickname.nickname-a {
  font-size: inherit;
  line-height: inherit;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codeb {
  color: #e6e7ee;
  float: left;
  font-size: 15px;
  line-height: 20px;
  margin-top: 8px;
  margin-bottom: 4px;
  margin-left: 40px;
}

.signature span {
  float: left;
  font-size: 17px;
  line-height: 20px;
  margin-bottom: 8px;
  margin-left: 40px;
  word-break: break-all;
}
.signature span,
.signature-a {
  color: #e6e7ee;
  font-family: PingFang SC, DFPKingGothicGB-Regular, sans-serif;
  font-weight: 400;
}

.el-menu-item {
  height: 100px;
  font-size: 20px;
}
</style>
<script>
export default {
  data() {
    return{

    };
  },
  created() {},
  methods: {

    zhanghu: function () {
      
      this.$router.replace('/personage/personage2' ); //編程式路由跳转页面
    },
     weiguan: function () {
      
      this.$router.replace('/personage/weiguan' ); //編程式路由跳转页面
    },
  },
};
</script>
